<template>
  <div class="padding-left-right-20 padding-top-10">
    <el-tabs class="has-tab-header-border" v-model="activeTab" @tab-click="tabClick">
      <template v-for="item in typeList">
        <el-tab-pane :key="item.classification" :name="item.classification" :label="(item.classificationName || '') + '(' + (item.customerNum || 0) + ')'"> </el-tab-pane>
      </template>
    </el-tabs>

    <form-common class="margin-top-30" :filed-list="searchClientCurrentList" ref="form" @selectChange="selectChange"></form-common>
    <div class="fill-box margin-bottom-20">
      <el-button type="primary" size="large" class="f-right margin-left-20 z-index-99" @click="searchFn">查询</el-button>
      <el-button size="large" class="f-right z-index-99" @click="resetFn">重置</el-button>
    </div>

    <el-table :border="false" stripe :data="tableData" class="new-table-style">
      <el-table-column align="left" label="客户简称" prop="partnerShortName">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.partnerShortName" placement="bottom">
            <span class="one-line-ellipsis">{{ scope.row.partnerShortName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column align="center" label="客户类型" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.partnerCategory == 1">企业</span>
          <span v-if="scope.row.partnerCategory == 2">个人</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="业态/行业" prop="industryTypeName" width="120">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.industryTypeName" placement="bottom">
            <span class="one-line-ellipsis">{{ scope.row.industryTypeName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="品牌" prop="operateBrandName" width="120">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.operateBrandName" placement="bottom">
            <span class="one-line-ellipsis">{{ scope.row.operateBrandName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否在黑名单" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.ifBlackList == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button v-if="scope.row.ifBlackList == 0" type="text" @click="blacklistManage(scope.row, 'add')">移入黑名单</el-button>
          <el-button v-if="scope.row.ifBlackList == 1" type="text" @click="blacklistManage(scope.row, 'remove')">移出黑名单</el-button>
          <el-button type="text" @click="goInfo(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="total" @change="pageChange" :total="total" :current-page="currentPage" paginationLayout="total, prev, pager, next" />
  </div>
</template>

<script>
  import { searchClientCurrentList } from './form';
  import formCommon from '@g/components/form/formCommon.vue';
  import { apiConstant } from '@a/index';
  import { projectList } from '@/api';
  import Api from '../../api/clientManage';
  import { requestTips, askDialog } from '@/common/js/utils.js';

  export default {
    name: 'current',
    data() {
      return {
        activeTab: '',
        tableData: [],
        typeList: [{}, {}, {}, {}, {}, {}],
        searchClientCurrentList: searchClientCurrentList,
        contractCustomerKeyList: [],
        industryList: [], //行业/业态
        total: 0,
        currentPage: 1,
        pageSize: 10,
        projectKey: localStorage.getItem('projectKey'),
        systemType: localStorage.getItem("systemType")
      };
    },
    mounted() {
      this.initForm();
      this.getProjectList();
      this.getFormatsAndIndustry();
      this.getContractTypeCount();
    },
    methods: {
      //切换tab
      tabClick(tab) {
        this.activeTab = tab.name;
        this.currentPage = 1;
        let obj = this.typeList.find(item => item.classification == tab.name);
        this.contractCustomerKeyList = obj.contractCustomerKeyList;
        this.getDataSource();
      },

      async getDataSource() {
        let searchParam = this.$refs.form.validateForm();
        let res = await Api.customerCurrList({
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          primaryKeys: this.contractCustomerKeyList,
          ...searchParam,
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //业态/行业
      async getFormatsAndIndustry() {
        let res = await Api.listByMapBizId({
          bizId: 'commercial_rent_main_data',
          catalogTypeList: ['business_type_child'],
          mapBizId: localStorage.getItem('userEnterpriseid'), //企业id
        });
        this.industryList = res.rows || [];
        this.searchClientCurrentList.forEach(item => {
          if (item.bindFieldName == 'industryTypeList') {
            item.optionList = res.rows || [];
          }
        });
      },

      //项目列表
      async getProjectList() {
        const res = await projectList({});
        this.searchClientCurrentList.forEach(item => {
          if (item.bindFieldName == 'projectKey') {
            item.optionList = res.rows || [];
          }
        });
      },

      //品牌
      async getOperateBrand(valList) {
        let parentId = [];
        this.industryList.forEach(ele => {
          if (valList.includes(ele.primaryKey)) {
            parentId.push(ele.parentId);
          }
        });
        let res = await Api.categoryList({
          parentIds: parentId,
          catalogTypeList: ['brand_child'],
        });
        this.searchClientCurrentList.forEach(item => {
          if (item.bindFieldName == 'operateBrandList') {
            item.isDisabled = false;
            item.optionList = res.rows || [];
          }
        });
      },

      //详情
      async goInfo(row) {
        let queryData = {
          customerKey: row.primaryKey,
          headerName: '客户详情',
          isHiddenTools: 1,
          clientName: row.partnerName,
        };
        let pathUrl = {
          name: 'client-manage-info',
          query: queryData,
        };
        let { href } = this.$router.resolve(pathUrl);
        let windowName = 'clientManageToInfo';
        window.open(href, windowName);
      },

      //数量
      async getContractTypeCount() {
        let res = await Api.customerCount({
          projectKeys: this.projectKey ? [this.projectKey] : null,
        });
        this.activeTab = res.customerClassificationList[0].classification;
        this.contractCustomerKeyList = res.customerClassificationList[0].contractCustomerKeyList;
        this.typeList = res.customerClassificationList || [];
        this.getDataSource();
      },

      //黑名单管理
      async blacklistManage(row, type) {
        let ifBlackList = type == 'add' ? 1 : 0;
        let res = await Api.customerInfoUpdate({
          primaryKey: row.primaryKey,
          ifBlackList: ifBlackList,
        });
        requestTips(res, () => {
          this.getDataSource();
        });
      },

      selectChange(data) {
        if (data.filedName == 'industryTypeList') {
          data.cbList('operateBrandList', []);
          if (data.filedVal.length == 0) {
            data.cb('operateBrandList', []);
            return;
          }
          this.getOperateBrand(data.filedVal);
        }
      },

      resetFn() {
        this.$refs.form.clearValidateForm();
        this.currentPage = 1;
        this.getDataSource();
      },

      //查询
      searchFn() {
        this.currentPage = 1;
        this.getDataSource();
      },

      initForm() {
        if (this.systemType != 'businessBuildingOperate') {
          this.searchClientCurrentList.forEach((item,index) => {
            if (item.bindFieldName == 'projectKey') {
              this.searchClientCurrentList.splice(index,1)
            }
          });
        }
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getDataSource();
      },
    },
    components: { formCommon },
  };
</script>

<style lang="scss" scoped>
  .z-index-99 {
    z-index: 99;
  }
</style>
